<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>PC端底部领取资料横幅</title>
</head>

<body>


  <div class="testqq">向下滑动至本颜色不可见，即可展示横幅</div>
  <div class="test">简简单单的早饭</div>

  <div id="c-footer-lq">
    <div>
      <span>全球500强企业客户都在用的《企业官网建设实战指南》限时免费领取！</span>
      <a href="#" target="_blank">领取资料</a>
    </div>
  </div>
  <script>
    //显示横幅
    const show = () => {
      id = document.getElementById("c-footer-lq");
      //id.style.display = "block";
      //id.style.visibility = "visible";
      id.style.opacity = "1";
    };

    //关闭横幅
    const closes = () => {
      id = document.getElementById("c-footer-lq");
      //id.style.display = "none";
      //id.style.visibility = "hidden";
      id.style.opacity = "0";
    };

    var io = new IntersectionObserver((entries) => {
      // 判断第一个监视元素，如果不可见，就返回
      if (entries[0].intersectionRatio <= 0) {
        show();
        console.log("展示项目");
      } else {
        console.log("隐藏项目");
        closes();
      }
    });

    // 开始观察触发守卫
    io.observe(document.querySelector(".testqq"));
  </script>
  <style>
    #c-footer-lq {
      position: fixed;
      bottom: 10px;
      left: 50%;
      z-index: 900;
      width: 9rem;
      margin-left: -4.5rem;
      background-color: #00cc82;
      border-radius: 5px;
      padding: 10px 40px;
      color: #fff;
      /*display: none;*/
      transition: all 0.2s linear;
    }

    #c-footer-lq div {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    #c-footer-lq a {
      display: block;
      width: 100px;
      line-height: 36px;
      border-radius: 3px;
      background-color: #fff;
      text-align: center;
      color: #00cc82;
    }

    @media (max-width: 767px) {
      #c-footer-lq {
        display: none !important;
      }
    }

    /*补充*/
    a,
    a:hover,
    a:focus {
      text-decoration: none;
    }

    html {
      font-size: 10px;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

    html {
      font-size: calc(100vw / 19.2);
    }

    body {
      font-family: "PingFang SC", "Microsoft YaHei", "Microsoft YaHei UI",
        "WenQuanYi Micro Hei", "Arial", "sans-serif", \5b8b\4f53;
      font-size: 16px;
      line-height: 1.5;
      color: #333;
      background: #fff;
    }

    @media screen and (max-width: 1279px) {
      body {
        font-size: 12px;
      }
    }

    * {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }

    * {
      padding: 0;
      margin: 0;
      outline: none;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }
  </style>

  <style>
    .testqq {
      width: 200px;
      height: 500px;
      background-color: #00cc82;
    }

    .test {
      width: 200px;
      height: 1500px;
      background-color: aliceblue;
    }
  </style>
</body>

</html>